The row is the whole design system

I rebuilt this site over a long weekend and ended up deleting almost every component I started with. The cards went first, then the tag pills, then the two different list styles I had somehow written for two lists that did the same job. What survived was one element: a line of text with a date beside it, which highlights when you point at it.

Every list on the site is now that element. Writing, projects, the log on the Now page, the previous and next links at the foot of an article — same markup, same padding, same hover. There is exactly one interaction to learn here, and you learn it in the first second.

Why one element is enough

The argument against this is that different content deserves different treatment. A project is not a blog post; a blog post is not a link to someone else's site. That is true about the content and almost never true about the row. What actually differs is which columns are present: a post shows a date, a project shows a year and a status, an external link shows a domain. The container does not need to change for that. Columns do.

Once I accepted that, a whole category of decisions disappeared. I stopped asking what a section should look like and started asking what its columns were. The answer usually took ten seconds, and the design was already built.

The gutter is doing the work

The one detail I would not give up is that the hover field bleeds twelve pixels past the text on both sides. It is a small thing and it changes the feel completely. A highlight that stops at the text reads as a button that was hiding under the words. A highlight that runs into the margin reads as the row itself, the full-width thing you were always pointing at, briefly becoming visible.

Twelve pixels is not a magic number. It is roughly the width of a space at this size, which is enough to read as deliberate and not enough to read as a box.

What it cost

Restraint of this kind has a real price, and it is paid on the day you want to feature something. There is no hero row, no highlighted card, no way to say this one matters more without inventing a second element and losing the whole argument. I have made my peace with it: on a personal site the ordering is the emphasis. The thing at the top is the thing that matters.

The other cost is that the site is quiet. Someone landing here will not be impressed in the first half second. They will, I hope, be unbothered — and then they will read something, which was the point.